<template>
  <cu-layout :bgStyle="{ color: '#ffffff', title: '服务评价' }" :navProp="{ placeholder: true, bgColor: 'rgba(255,255,255)' }">
    <view :class="[`${prefixCls}-evaluate-container`]">
      <uv-sticky offsetTop="0" :customNavHeight="$Platform.navbar">
        <view class="uv-evaluate-navbar">
          <uv-tabs :list="navbar" :scrollable="false" v-model="tab" :lineColor="theme" @change="change" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" />
          <uv-tabs :list="navList" :scrollable="false" v-model="current" :lineColor="theme" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @change="currentChange" />
        </view>
      </uv-sticky>
      <view v-if="dataList.length" class="evaluate-list">
        <!-- 账单缴费 -->
        <template v-if="current === 1">
          <view class="evaluate-item" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)">
            <view class="evaluate-item-title">
              <view class="date">{{ item.create_time }} </view>
              <view class="tag" v-if="tab == 0 && item.is_overdue == 1">已过期 </view>
            </view>
            <view class="evaluate-item-info">
              <image class="evaluate-item-img" :src="item.icon_url"></image>
              <view class="evaluate-item-content">
                <view class="evaluate-item-building"> {{ item.project_name }}</view>
                <view class="evaluate-item-room"> {{ item.room_number }}</view>
                <view v-if="item.is_evaluate == 0 && item.is_overdue != 1" class="evaluate-item-button" @click="handleBillEvaluate(item)">立即评价 </view>
              </view>
            </view>
            <view class="submit-date">{{ item.type_name + ' ： ' + item.evaluate_time }}</view>
          </view>
        </template>
        <!-- 在线报修 -->
        <template v-if="current === 5">
          <view class="evaluate-item" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)">
            <view class="evaluate-item-title">
              <view class="date">{{ item.create_time }} </view>
              <view class="tag" v-if="tab == 0 && item.is_overdue == 1">已过期 </view>
            </view>
            <view class="evaluate-item-info">
              <image class="evaluate-item-img" :src="item.icon_url"></image>
              <view class="evaluate-item-content">
                <view class="evaluate-item-building"> {{ item.project_name }} </view>
                <view class="evaluate-item-room"> {{ item.room_number }}</view>
                <view v-if="item.is_evaluate == 0 && item.is_overdue != 1" class="evaluate-item-button" @click="handleEvaluate(item)">立即评价 </view>
              </view>
            </view>
            <view class="submit-date">{{ item.type_name + ' ： ' + item.create_time }}</view>
          </view>
        </template>
        <!-- 其他 => 入住退租 -->
        <template v-if="current === 99">
          <view class="evaluate-item" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)">
            <view class="evaluate-item-title">
              <view class="date">{{ item.evaluate_time }} </view>
              <view class="tag" v-if="tab == 0 && item.is_overdue == 1">已过期 </view>
            </view>
            <view class="evaluate-item-info">
              <image class="evaluate-item-img" :src="item.icon_url"></image>
              <view class="evaluate-item-content">
                <view class="evaluate-item-building"> {{ item.project_name }}</view>
                <view class="evaluate-item-room"> {{ item.room_number }}</view>
                <view v-if="item.is_evaluate == 0 && item.is_overdue != 1" class="evaluate-item-button" @click="resignationEvaluation(item)">立即评价 </view>
              </view>
            </view>
            <view class="submit-date">{{ item.type_name + ' ： ' + item.create_time }}</view>
          </view>
        </template>
        <!-- 保洁服务 -->
        <template v-if="current === 8">
          <view class="evaluate-item" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)">
            <view class="evaluate-item-title">
              <view class="date">{{ item.create_time }} </view>
              <view class="tag" v-if="item.is_evaluate == '已过期'">已过期 </view>
            </view>
            <view class="evaluate-item-info">
              <image class="evaluate-item-img" :src="item.cover"></image>
              <view class="evaluate-item-content">
                <view class="evaluate-item-building"> {{ item.project_name }}</view>
                <view class="evaluate-item-room"> 保洁房间：{{ item.room_name }}</view>
                <view class="evaluate-item-button" @click.stop="handleCleanEvaluate(item)" v-if="item.is_evaluate == '立即评价'">立即评价</view>
              </view>
            </view>
          </view>
        </template>
      </view>
      <view v-else class="evaluate-list">
        <cu-empty mode="list" text="暂无评价"> </cu-empty>
      </view>
      <!-- 去评价弹窗 -->
      <uv-popup ref="evaluation-popup" :closeOnClickOverlay="false">
        <view class="popup-container">
          <view class="popup-header">
            <view class="left"></view>
            <p class="center">{{ current === 8 ? '保洁评价' : '评价' }}</p>
            <view class="right">
              <uv-icon class="right" name="close" @click="popupClose"></uv-icon>
            </view>
          </view>
          <view class="popup-main">
            <view v-for="(item, index) in evaluate" :key="index">
              <uv-transition v-if="item.show" :show="item.show" mode="slide-right">
                <view :class="['step', 'step-' + index]">
                  <text>{{ item.message }}</text>
                  <view class="flex justify-around">
                    <template v-if="item.value">
                      <template v-if="item.value === '3'">
                        <uv-transition :show="true" mode="zoom-in">
                          <image :src="$CDN('/customer/static/images/png/bad-active.png')" title="不好-active"></image>
                        </uv-transition>
                        <image @click="handleEvaluateNuxt(index, '5')" :src="$CDN('/customer/static/images/png/good.png')" title="好"></image>
                      </template>
                      <template v-else>
                        <image @click="handleEvaluateNuxt(index, '3')" :src="$CDN('/customer/static/images/png/bad.png')" title="不好"></image>
                        <uv-transition :show="true" mode="zoom-in">
                          <image :src="$CDN('/customer/static/images/png/good-active.png')" title="好-active"></image>
                        </uv-transition>
                      </template>
                    </template>
                    <template v-else>
                      <image @click="handleEvaluateNuxt(index, '3')" :src="$CDN('/customer/static/images/png/bad.png')" title="不好"></image>
                      <image @click="handleEvaluateNuxt(index, '5')" :src="$CDN('/customer/static/images/png/good.png')" title="好"></image>
                    </template>
                  </view>
                  <view class="flex justify-around">
                    <view>{{ item.bad }}</view>
                    <view>{{ item.good }}</view>
                  </view>
                  <view class="bottom-box">
                    <view class="tag-wrap" v-if="index == 'evaluateStepThree'">
                      <view
                        :class="['tag-item', item.valueList.includes(items.id) ? 'active-item' : '']"
                        v-for="(items, indexs) in item.list"
                        :key="indexs"
                        @click="handleSetActive(items)"
                      >
                        {{ items.name }}
                      </view>
                    </view>
                    <uv-textarea
                      class="popup-area"
                      v-model="item.content"
                      :showConfirmBar="false"
                      placeholder="请对本次服务留下您宝贵的建议"
                      maxlength="50"
                      height="58"
                      count
                    ></uv-textarea>
                    <view class="evaluate-button" :class="{ isSubmit: isSubmit }" @click="submit()">
                      {{ isSubmit ? '立即提交' : '请完成评价' }}
                    </view>
                  </view>
                </view>
              </uv-transition>
            </view>
          </view>
          <!-- <view class="button-wrap">
            <view class="button cancel" @click="popupClose">取消</view>
            <view class="button submit" @click="popupSubmit">确认</view>
          </view> -->
        </view>
      </uv-popup>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { evaluateList, evaluateTags, replyAll, saveCleanEvaluate } from './api'

export default {
  name: 'evaluate',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      tab: 0,
      current: 1,
      page: 1,
      dataList: [],
      activeStyle: { color: this.theme, fontSize: '12px' },
      inactiveStyle: { fontSize: '12px' },
      navbar: [
        { name: '待评价', value: 0 },
        { name: '已评价', value: 1 },
      ],
      navList: [
        { name: '账单缴费', value: 1 },
        { name: '在线报修', value: 5 },
        { name: '入住退租', value: 99 },
        { name: '保洁服务', value: 8 },
      ],
      evaluateTagList: [],
      reparid: '',
      cleanId: '',
      evaluate: {
        evaluateStepThree: {
          show: false,
          message: '满意工作人员的服务吗?',
          bad: '不满意',
          good: '满意',
          list: [],
          value: '',
          valueList: [],
          content: '',
        },
        cleanEvaluate: {
          show: false,
          message: '满意工作人员的服务吗?',
          bad: '不满意',
          good: '满意',
          list: [],
          value: '',
          valueList: [],
          content: '',
        },
      },
      cleanEvaluate: {
        status: '', //0满意;1不满意
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
    isSubmit() {
      if (this.current == 5) {
        return this.evaluate.evaluateStepThree.valueList.length != 0
      }
      if (this.current == 8) {
        return this.evaluate.cleanEvaluate.value && this.evaluate.cleanEvaluate.content
      }
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    this.getData()
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getData()
  },
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      await this.evaluateList()
    },
    async evaluateList() {
      this.dataList = []
      const { current: typeId, tab: state, page } = this
      const { data } = await evaluateList({ page, state, typeId })
      this.dataList = data.evaluates
      //  this.dataList = [{
      //     evaluate_time: '2024-09-09 14:12:00',
      //     is_overdue: 1,
      //     icon_url: '',
      //     project_name: '深圳中天城',
      //     room_number: 'A01',
      //     type_name: '账单缴费',
      //     is_evaluate: 0,
      //     id: 1,
      //   }, {
      //     evaluate_time: '2024-09-09 14:12:00',
      //     is_overdue: 0,
      //     icon_url: '',
      //     project_name: '深圳中天城2',
      //     room_number: 'A01',
      //     type_name: '账单缴费',
      //     is_evaluate: 0,
      //   }

      //   ]
      console.log('data', data)
      uni.stopPullDownRefresh()
    },
    currentChange(e) {
      this.current = e.value
      this.getData()
    },
    popupClose() {
      this.$refs['evaluation-popup'].close()
      if (this.current == 5) {
        this.evaluate.evaluateStepThree = {
          show: false,
          message: '满意工作人员的服务吗?',
          bad: '不满意',
          good: '满意',
          list: [],
          value: '',
          valueList: [],
          content: '',
        }
      }
      if (this.current == 8) {
        this.evaluate.cleanEvaluate = {
          show: false,
          message: '满意工作人员的服务吗?',
          bad: '不满意',
          good: '满意',
          list: [],
          value: '',
          valueList: [],
          content: '',
        }
      }
    },
    async getTag() {
      const id = this.reparid
      const { data } = await evaluateTags({ id, type: 5 })
      this.evaluateTagList = data.tags
    },
    handleEvaluateNuxt(evaluateName, value) {
      this.evaluate[evaluateName].value = value
      switch (evaluateName) {
        case 'evaluateStepThree':
          this.evaluate.evaluateStepThree.valueList = []
          if (value == 5) {
            this.evaluate.evaluateStepThree.list = this.evaluateTagList.filter((v) => v.score == 4 || v.score == 5).slice(0, 2)
          } else {
            this.evaluate.evaluateStepThree.list = this.evaluateTagList.filter((v) => v.score != 4 && v.score != 5).slice(0, 2)
          }
          break
        default:
          break
      }
    },
    handleSetActive({ id }) {
      if (this.evaluate.evaluateStepThree.valueList.includes(id)) {
        this.evaluate.evaluateStepThree.valueList.forEach((v, i) => {
          if (v == id) {
            this.evaluate.evaluateStepThree.valueList.splice(i, 1)
          }
        })
      } else {
        this.evaluate.evaluateStepThree.valueList.push(id)
      }
    },
    // 账单评价
    handleBillEvaluate({ id }) {
      this.$ROUTE.go('/pages/subpackage/evaluate/bill/index', { id })
    },
    handleEvaluate({ id }) {
      this.reparid = id
      this.getTag()
      this.$refs['evaluation-popup'].open('bottom')
      this.evaluate.evaluateStepThree.show = true
    },
    handleCleanEvaluate({ id }) {
      this.cleanId = id
      // this.getTag()
      this.$refs['evaluation-popup'].open('bottom')
      this.evaluate.cleanEvaluate.show = true
    },
    // 退租评价
    resignationEvaluation({ id }) {
      this.$ROUTE.go('/pages/subpackage/evaluate/lease/index', { id })
    },
    change(e) {
      this.tab = e.value
      this.getData()
    },
    async submit() {
      if (!this.isSubmit) return
      if (this.current == 5) {
        const { value, valueList, content } = this.evaluate.evaluateStepThree
        const id = this.reparid
        const { errcode } = await replyAll({ id, tags: valueList, type: 5, score: value, origin_id: 1, managerScore: value, content })
        if (errcode === 0) {
          uni.$uv.toast('评价成功')
          this.popupClose()
          this.$ROUTE.go('/pages/subpackage/evaluate/index')
          return
        }
      }
      if (this.current == 8) {
        const { value, content } = this.evaluate.cleanEvaluate
        console.log(value)
        console.log(content)
        const { errcode } = await saveCleanEvaluate({ id: this.cleanId, status: value == '5' ? '0' : '1', remark: content })
        if (errcode === 0) {
          uni.$uv.toast('评价成功')
          this.popupClose()
          this.getData()
          return
        }
      }
    },
    handleDetail({ id }) {
      if (this.tab === 0) return
      switch (this.current) {
        case 1:
          this.$ROUTE.go('/pages/subpackage/evaluate/bill/detail', { id })
          break
        case 5:
          this.$ROUTE.go('/pages/subpackage/repair/evaluate', { id })
          break
        case 99:
          // this.$ROUTE.go('/pages/subpackage/evaluate/lease/detail', { id })
          this.$ROUTE.go('/pages/subpackage/evaluate/lease/detail', { id })
          break
        case 8:
          console.log('跳转保洁评价详情')
          // this.$ROUTE.go('/pages/subpackage/evaluate/lease/detail', { id })
          this.$ROUTE.go('/pages/subpackage/evaluate/clean/detail', { id })
          break
        default:
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('evaluate-container')} {
  position: relative;
  background: #f5f5f5;
  .uv-evaluate-navbar {
    background: white;
    text-align: center;
    // position: fixed;
    // width: 100%;
  }
  .evaluate-list {
    margin: 15px;
    .evaluate-item {
      background: white;
      border-radius: 8px;
      margin-bottom: 10px;
      .evaluate-item-title {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        padding: 8px 0;
        margin: 0 8px;
        border-bottom: 1px solid #f5f5f5;
        .tag {
          margin-left: auto;
          margin-right: 10px;
          background: $uv-primary;
          color: white;
          border-radius: 4px;
          padding: 2px 6px;
          font-size: 12px;
        }
      }
      .evaluate-item-info {
        padding: 8px 0;
        margin: 0 8px;
        display: flex;
        .evaluate-item-img {
          width: 120px;
          height: 90px;
          border-radius: 7px;
          background: #f5f5f5;
          margin-right: 20px;
        }
        .evaluate-item-content {
          display: flex;
          flex-direction: column;
          width: calc(100% - 100px);
          box-sizing: border-box;
          .evaluate-item-building {
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 10px;
          }
          .evaluate-item-button {
            background: $uv-primary;
            color: white;
            font-size: 14px;
            padding: 6px 15px;
            margin-top: auto;
            margin-left: auto;
            margin-right: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
          }
        }
      }
      .submit-date {
        padding: 8px 0 10px;
        margin: 0 8px;
        font-size: 12px;
      }
    }
  }
}
</style>
<style lang="scss">
.popup-container {
  width: 100%;
  min-height: 400rpx;
  max-height: 900rpx;
  box-sizing: border-box;
  padding: 24rpx 32rpx;
  .popup-header {
    display: flex;
    justify-content: space-between;
    .left {
      width: 32rpx;
      visibility: hidden;
    }
    .center {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
    }
    .right {
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
  .popup-main {
    .step {
      image {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 20rpx;
      }
      text {
        margin: 40rpx 0;
        display: block;
        text-align: center;
      }
    }
    .flex {
      display: flex;
    }
    .justify-around {
      justify-content: space-around;
    }
    .bottom-box {
      margin-top: 20rpx;
      .tag-wrap {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        margin: 20rpx 0;
        .tag-item {
          min-width: 30%;
          border: 2rpx solid black;
          padding: 8rpx 30rpx;
          font-size: 24rpx;
          text-align: center;
          border-radius: 8rpx;
          margin-left: 25px;
          margin-bottom: 15rpx;
        }
        .active-item {
          border-color: #ef4f12;
          background: #ef4f12;
          color: white;
        }
      }
    }
    .evaluate-button {
      margin-top: 40rpx;
      box-sizing: border-box;
      padding: 30rpx 0;
      color: white;
      background: #cccccc;
      border-radius: 8rpx;
      text-align: center;
    }
    .isSubmit {
      background: #ef4f12;
      color: white;
    }
  }
  .button-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 32px);
    padding: 0 32rpx 32rpx;
    .button {
      font-weight: 400;
      font-size: 28rpx;
      padding: 24rpx 0;
      width: calc(50% - 17rpx);
      border-radius: 200rpx;
      text-align: center;
    }
    .cancel {
      background: #ffffff;
      border: 2rpx solid $uv-primary;
      color: $uv-primary;
    }
    .submit {
      background: $uv-primary;
      color: #ffffff;
    }
  }
}
</style>
